<template>
<div>
  <p v-color="c1">自定义指令示例</p>
  <p v-color="c2">自定义指令示例</p>
  <p v-color="c3">自定义指令示例</p>
  <input type="text" v-foucus>
  <my-test :uname="uname"></my-test>
</div>

</template>

<script>
import MyTest from './components/MyTest.vue'
export default {
  components:{MyTest},
  data() {
    return {
      c1: 'green',
      c2:'red',
      c3:'blue',
      uname:'zhangsan'
    }
  },
  directives: {
    color: {
      bind(el,obj) {
        el.style.color = obj.value
      },
       update(el, obj) {
        el.style.color = obj.value
      }
    }
  },
  focus:{
    inserted(el){
      el.focus()
    }
  }
}
</script>

<style>

</style>